<template>
  <div class="tuku-container">
    <div class="tuku-show">
      <div class="image-container" v-for="(item) in imageList.slice(page*pageSize,page*pageSize+pageSize)" :key="item" >
      <img :src="item">
      <div class="image-bottom">
        <h5>{{ item.substring(item.lastIndexOf('/')+1) }}</h5>
        <button @click="deleteImage(item.substring(item.lastIndexOf('/')+1))">删除</button>
      </div>
      </div>
    </div>
    <div class="tuku-show-bottom">
      <div @click="prePage">上一页</div>
      <div>第{{ page+1 }}页 共{{ totalPage }}页</div>
      <div @click="nextPage">下一页</div>
    </div>
  </div>
</template>

<script>

export default {
  computed:{
    totalPage(){
      return Math.ceil(this.imageList.length/this.pageSize)
    }
  },
  data(){
    return {
      imageList:[],
      page:0,
      pageSize:12
    }
  },
  methods:{
    prePage(){
      if(this.page>0){
        this.page = this.page-1
      }
    },
    nextPage(){
      this.page++
    },
    async deleteImage(name){
      let {data} = await this.$http.post('/deleteImage/'+name)
      console.log(data)
      let {data:ret} = await this.$http.get('/getImages')
      this.imageList = ret
    }
  },
  async created(){
    let {data} = await this.$http.get('/getImages')
    this.imageList = data
  }
}
</script>

<style lang="less">
    .tuku-container{
      width: 95%;
      height: 90%;
      position: absolute;
      background-color: #ffffff;
      border-radius: 10px;
      padding: 10px;
      .tuku-show-bottom{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10px;
        font-weight: bold;
        cursor: pointer;
      }
      .tuku-show{
        height: 100%;
        overflow: hidden;
        max-height: 95%;
        display: flex;
        box-sizing: border-box;
        justify-content: left;
        flex-wrap: wrap;
        .image-container{
          margin: 15px;
          display: flex;
          flex-direction: column;
          flex: 1;
          img{
            width: 150px;
            height: 150px;
          }
        }
        .image-bottom{

          display: flex;
          flex-direction: column;
          align-items: left;
          h5{
            margin: 0 0 10px 0;
            font-size: 15px;
            max-width: 50px;
            font-weight: 500;
          }
          button{
            border: 0px solid #5e5f61;
            margin: 0 5px;
            color: #ffffff;
            font-size: 8px;
            width: 50%;
            max-width: 120px;
            background-color: #272727;
            border-radius: 10px;
          }
          button:hover{
            background-color: #656363;
            color: #000000;
          }
        }
      }
    } 
</style>